<template>
    <a-form layout="vertical" ref="filterForm" :model="form">
      <a-form-item label="姓名" name="staffName">
        <a-input @pressEnter="searchStaffName" v-model:value="form.staffName"></a-input>
      </a-form-item>
      <a-form-item label="奖惩类型" name="type">
        <a-input @pressEnter="searchDepartment" v-model:value="form.type"></a-input>
      </a-form-item>
    </a-form>
  </template>   
  
  <script setup lang="ts">
  import appStore from '@/store';
  import { FormInstance } from 'ant-design-vue';
  const { isClearFormRef } = storeToRefs(appStore.useCommonStore);
  const filterForm = ref<FormInstance>();
  const form = reactive({
    staffName: '',
    type: '',
  });
  const searchStaffName = async (e) => {
    console.log(e.target.value,'e');
    const res = await appStore.useStaffStore.getStaffList(1, 10, { staffName: [e.target.value] });
    console.log(res, 'ressssss')
  }
  const searchDepartment =async (e) => {
    const res = await appStore.useStaffStore.getStaffList(1, 10, { departmentName: [e.target.value] });
  }
  const searchLevel = async (e) => {
    const res = await appStore.useStaffStore.getStaffList(1, 10, { levelName: [e.target.value] });
  }
  
  watch(isClearFormRef, async ()=> {
    // 清空表单
    filterForm.value?.resetFields();
    // 重新请求数据
    await appStore.useStaffStore.getStaffList();
  });
  </script>
  
  <style lang="less" scoped>
  form {
    margin-top: 30px;
  }
  input {
    width: 100%;
  }
  </style>
  